import React from 'react';
import { Card, Space, Typography } from 'antd';

const { Text } = Typography;

const HelpSection = () => {
  const helpItems = [
    {
      title: '局域网名称：',
      content: '为您的局域网起一个有意义的名称，便于识别和管理'
    },
    {
      title: 'Tracker配置：',
      content: '确保Tracker服务运行在指定地址上，支持IPv4地址和端口格式'
    },
    {
      title: '网络类型：',
      content: '内网网络仅限邀请加入，公网网络允许用户搜索并申请加入'
    },
    {
      title: '创建后：',
      content: '您将自动成为网络管理员，可以管理成员和配置网络规则'
    }
  ];

  return (
    <Card className="help-section" title="创建指南" size="small">
      <Space direction="vertical" size="small">
        {helpItems.map((item, index) => (
          <div key={index} className="help-item">
            <Text className="help-item-title">{item.title}</Text>
            <Text className="help-item-content">{item.content}</Text>
          </div>
        ))}
      </Space>
    </Card>
  );
};

export default HelpSection;